<!-- 文章管理 -->
<template>
  <div class="article-main">
    <!-- 搜索框 -->
    <el-card>
      <div slot="header">
        <span>文章搜索</span>
      </div>
      <el-row>
        <el-col :span="6">
          <el-input v-model="search.title" size="small" style="width:220px" placeholder="根据文章名称搜索"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="search.author" size="small" style="width:220px" placeholder="根据作者搜索"></el-input>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-button type="default" size="small" @click="doReset">重置</el-button>
          <el-button type="primary" size="small" @click="doSearch">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 列表页  -->
    <el-card>
      <div slot="header">
        <el-row>
          <el-col :span="12">
            <span>文章列表页</span>
          </el-col>
          <el-col :span="12" style="textAlign:right">
            <el-button type="primary" @click="articalAdd" size="small">新增</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="articleList" border style="width: 100%"  v-loading="loading">
        <el-table-column align="center" fixed type="index" label="#" width="60"></el-table-column>
        <el-table-column align="center" fixed prop="title" label="文章标题" width="280"></el-table-column>
        <el-table-column align="center" prop="author" label="作者" width="235"></el-table-column>
        <el-table-column align="center" prop="kindTitle" label="文章分类" width="245"></el-table-column>
        <el-table-column align="center" label="颜色" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.color1" class="cicle" :style="{backgroundColor:scope.row.color1}"></span>
            <span v-if="scope.row.color2" class="cicle" :style="{backgroundColor:scope.row.color2}"></span>
            <span v-if="scope.row.color3" class="cicle" :style="{backgroundColor:scope.row.color3}"></span>
          </template>
        </el-table-column>
        <el-table-column  align="center" label="封面图片" width="120">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.coverImg"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="addTime" label="添加时间" width="180"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="doEdit(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" style="color:red" @click="doDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
       <el-pagination
      style="float:right; padding-bottom:15px" 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.start"
      :page-sizes="page.sizes"
      :page-size="page.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalcount">
    </el-pagination>
    </el-card>
    <Detail ref="detail" :refrshList='getArticalList'/>
  </div>
</template>

<script>
import articalApi from "@/api/matter/artical";
import Detail from '@/views/matter/article/Detail'
import _ from 'lodash'
export default {
  name: "articalList",
  components:{
    Detail
  },
  data() {
    return {
      search: {},
      articleList: [],
      loading:false,
      page:{
        start:1,
        limit:10,
        sizes:[10,20,30],
        totalcount:0
      }
    };
  },
  created() {
    this.getArticalList();
  },
  methods: {
    getArticalList() {
      this.loading=true
      var params={
        start:this.page.start,
        limit:this.page.limit,
        ...this.search
      }
      params=_.pickBy(params,item=>item);
      _.pickBy(params,function(v){
        return v
      })
      articalApi.articleList(params).then((res) => {
        this.articleList = res.data.list;
        this.page.totalcount=res.data.totalRow
        this.loading=false
      });
    },
    //重置搜索框
    doReset() {
      this.search = {};
    },
    //搜索
    doSearch() {
      this.getArticalList();
      this.page.start=1
    },
    handleSizeChange(val){
       this.page.limit=val
       this.getArticalList()
    },
    handleCurrentChange(val){
       this.page.start=val
       this.getArticalList()
    },
    //新增
    articalAdd(){
      this.$refs.detail.openDialog()
    },
    //编辑
    doEdit(id){
      this.$refs.detail.openDialogDetail(id)
    },
    //删除
    doDel(id){
      articalApi.articalDel({id})
      .then(res=>{
        var index=this.articleList.findIndex(item=>{
          item.id==id
        })
        this.articleList.splice(index,1)
        this.getArticalList()
      })
    }
  },
};
</script>
<style lang='scss' scoped>
.article-main {
  .el-card {
    margin: 30px;
  }
  .cicle{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: 5px;
  }
}
</style>